<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        防抖
        当持续触发事件 一定时间内没有再触发事件 事件处理函数才会执行一次
        如果设定的时间到来之前 又一次触发了事件 就重新开始延时

        经典应用：输入框模糊输入，问题：请求服务器需要一定的时间，返回的数据很可能会出现前一次输入的结果
    -->
    <input type="text" id="input">
    <script>
        var input = document.getElementById('input');
        //防抖函数
        function debounce(delay){
            //闭包 将定时器的变量值一直保存在内存
            let timer;
            return function(value){
                clearTimeout(timer);
                timer = setTimeout(function(){
                    console.log(value);
                },delay)
            }
        }
        var debounceFunc = debounce(1000);
        input.addEventListener('keyup',function(e){
            debounceFunc(e.target.value);
        })
    </script>

    <!--
        节流
        当持续触发事件的时候 保证一段时间内 只调用一次事件处理函数
        一段时间内 只做一件事情
        经典应用：
    -->
    <button id="button">点击</button>
    <script>
        function thro(func,wait){
            let timeOut;
            return function(){
                if(!timeOut){
                    timeOut = setTimeout(function(){
                        func();
                        timeOut = null;
                    },wait)
                }
            }
        }
        function handle(){
            console.log(Math.random());
        }
        document.getElementById('button').onclick = thro(handle,2000);
    </script>
</body>
</html>